<template>
	<view>
		<view class="header">
			<view class="icon-view" @click="$utils.navigateBack(1)"><u-icon name="arrow-left" color="#fff" size="40"></u-icon></view>
			<!-- <view class="icon-view"><u-icon name="search" color="#fff" size="40"></u-icon></view> -->
		</view>
		<view class="banner">
			<image
				mode="widthFix"
				:src="banner"
			></image>
		</view>
		
		<!-- title -->
		<view class="title-view">
			<view class="left">
				<view class="title">{{title}}</view>
				<view class="sub-title grey margin-top10" @click="cycleShow=true"><u-icon name="clock" color="#aaa" size="30" class="margin-right10"></u-icon> 周期{{cycleCur.label}}</view>
			</view>
			<view class="right"><u-icon name="map-fill" color="#f6edc3" size="40" class="margin-right5"></u-icon> {{myCityObj.value?myCityObj.value:''}}</view>
		</view>
		<u-select v-model="cycleShow" :list="cycleList" @confirm="cycleConfirm"></u-select>
		
		<!-- main -->
		<view class="main">
			<scroll-view class="main-left" :class="isFixed?'is-fixed':''">
				<view
					class="title"
					v-for="(item, index) in dataList"
					:key="index"
					@click="typeClick(item.id)"
				>
					{{item.type}}<text v-if="itemNumber(item.list)">{{itemNumber(item.list)}}</text>
				</view>
			</scroll-view>
			<view class="main-right" id="mainRight">
				<view
					class="right-list"
					v-for="(item, index) in dataList"
					:key="index"
				>
					<view class="title grey" :id="'list'+item.id">{{item.type}}</view>
					<view
						class="child-list"
						v-for="(child, index) in item.list"
						:key="index"
					>
						<text>{{child.title}}</text>
						<u-icon :color="child.inCart?'#aaa':'#B00E0E'" size="40" class="add-icon" :name="child.inCart?'minus-circle':'plus-circle-fill'" @click="child.inCart=!child.inCart"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<view class="footer-box">
				<view class="compute-box">
					<u-icon name="checkbox-mark" color="#bbb" size="40" class="margin-right10"></u-icon>
					已选
					<text class="red">{{selectedList.length}}</text>
					个类别
				</view>
				<view class="btn red-bg" @click="btnSubmit">智能计算</view>
			</view>
		</view>
	</view>
</template>

<script>
import mixin from "@/libs/mixin.js";
import { getZzList } from '@/api/index.js'
export default{
	mixins: [mixin],
	data() {
		return {
			id: '',
			myCityObj: {},
			banner: '/static/images/compute-banner.jpg',
			title: '',
			cycleCur: {value: 1,label:"1个月"},
			cycleList: [
				{value: 1,label:"1个月"},
				{value: 3,label:"3个月"},
				{value: 6,label:"6个月"},
				{value: 12,label:"1年"}
			],
			cycleShow: false,
			dataList: [],
			mainScrollTop: 100,
			isFixed: false
		}
	},
	computed: {
		// 计算选择的数组
		selectedList(){
			let arrList = [];
			this.dataList.forEach(item=>{
				item.list.forEach(child=>{
					if(child.inCart == true){
						arrList.push(child);
					}
				});
			});
			return arrList
		},
		//计算小标题各自选中的数量
		itemNumber(){
			return function(arrList){
				let num = arrList.filter(item=>{
					return item.inCart
				}).length;
				return num>0 ? num : '';
			}
		}
	},
	onLoad(option) {
		//获取路由参数
		this.id = option.id ? option.id : '';
		// 获取城市列表
		if( this.$store.state.app.city.value ){
			this.myCityObj = this.$store.state.app.city;
		};
		// 获取所有资质列表
		this.getList();
	},
	onReady(){
		setTimeout(() => {
			uni.createSelectorQuery().select("#mainRight").boundingClientRect(res=>{
				this.mainScrollTop = res.top;
			}).exec();
		},100);
	},
	onPageScroll(Obj){
		this.isFixed = Obj.scrollTop>=this.mainScrollTop ? true : false;
	},
	methods:{
		// 根据大分类id获取列表内容
		getList(){
			getZzList({id:this.id, cityid:this.myCityObj.key}).then(res=>{
				this.dataList = res.list;
				this.title = res.title;
				if(res.banner){	this.banner = res.banner;}
			}).catch(err=>{
				uni.showToast({
					title: err.msg,
					icon:'none'
				})
			});
		},
		// title=周期选择回调
		cycleConfirm(e){
			if( e[0] ){
				this.cycleCur = e[0];
			}
		},
		// left-类别点击跳转锚点
		typeClick(id){
			uni.createSelectorQuery().in(this).select("#list"+id).boundingClientRect(res=>{//最外层盒子的节点：类或者id
				uni.pageScrollTo({
					  duration: 100,
					  scrollTop: res.top
				})
			}).exec();
		},
		// 提交
		btnSubmit(){
			//不是会员不让算
			/*uni.request({
				url: 'http://www.txzh.com.cn/api.php?app=Default&act=ishuiyuan',  
				method: 'POST',
				header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'X-Requested-With': 'xmlhttprequest'
				},
				data:{ 
					token:this.$store.state.app.token
				}, 
				success: res => {
					if(res.data.list.err == 1){
						uni.showToast({
							title: '请先购买会员',
							icon:'none'
						})
					}else{ 
					}
				},  
				fail: () => {},  
				complete: () => {}  
			});*/
			console.log(this.selectedList);
			if( this.selectedList.length<1 ){
				uni.showToast({
					title: '请选择内容！',
					icon:'none'
				});
				return false;
			}
			var ids = this.selectedList.map(item=>{
				return item.id
			});
			console.log('+++++++');
			console.log(ids)
			console.log(this.myCityObj.key)
			console.log(this.cycleCur.value)
			console.log("this.cycleCur: " + JSON.stringify(this.cycleCur));
		 
			console.log('+++++++++');
			this.$utils.navigateTo('/compute/content',{
				cycle: this.cycleCur.value,
				ids: ids,
				cityKey: this.myCityObj.key,
				industryId: this.id
			});
		}
	}
}
</script>

<style lang="scss">
page{
	background:#f3f3f3;
}
</style>
<style lang="scss" scoped>
.header{
	position:absolute;
	top:60rpx;
	left:0;
	z-index: 1;
	width:100%;
	padding:0 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	.icon-view{
		width:65rpx;
		height:65rpx;
		background: rgba(0,0,0,.2);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 40rpx;
	}
}
.banner{
	image{
		width:100%;
	}
}
.title-view{
	width: 100%;
	margin-top:-30rpx;
	position:relative;
	z-index: 1;
	background: #fff;
	border-radius: 30rpx 30rpx 0 0;
	padding: 30rpx 40rpx;
	display: flex;
	justify-content: space-between;
	.left{
		.title{
			font-size:34rpx;
		}
		.sub-title{
			font-size:26rpx;
		}
	}
	.right{
		width: 180rpx;
		height: 90rpx;
		box-sizing: border-box;
		padding-top:18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(../../static/images/city-bg.png) no-repeat center center;
		background-size: 100% 100%;
	}
}
.main{
	display: flex;
	justify-content: flex-end;
	.main-left{
		width:25%;
		text-align: center;
		.title{
			position:relative;
			padding: 30rpx 10rpx;
			box-sizing: border-box;
			line-height: 1.2em;
			font-size:22rpx;
			text{
				position:absolute;
				top:8rpx;
				right:8rpx;
				width:32rpx;
				height:32rpx;
				line-height:30rpx;
				font-size:20rpx;
				background:#de1b1b;
				text-align: center;
				color:#fff;
				border-radius: 50%;
			}
		}
		&.is-fixed{
			position:fixed;
			top:0;
			left:0;
			bottom:100rpx;
			padding-top:40rpx;
			z-index:9;
			background:#f3f3f3;
		}
	}
	.main-right{
		background: #fff;
		width:75%;
		box-sizing: border-box;
		padding:0 35rpx;
		.title{
			margin-top:40rpx;
			font-size:24rpx;
		}
		.child-list{
			padding:25rpx 50rpx 25rpx 30rpx;
			border-bottom:1px #eee solid;
			position:relative;
			.add-icon{
				position:absolute;
				right:0;
				top:27rpx;
			}
		}
	}
}
.footer{
	width:100%;
	height:100rpx;
	.footer-box{
		position:fixed;
		left:0;
		bottom:0;
		z-index:10;
		width:100%;
		height:100rpx;
		background: #fff;
		box-shadow: 0 0 30rpx rgba(0,0,0,.2);
		display: flex;
		justify-content: space-between;
		.compute-box{
			padding:18rpx 0 0 30rpx;
			.red{
				margin:0 10rpx;
				font-size:45rpx;
			}
		}
		.btn{
			width:210rpx;
			height:100rpx;
			line-height:100rpx;
			text-align: center;
			font-size:30rpx;
		}
	}
}
</style>